<template>
  <div class="info-completion">
    <div class="info-content">
      <!-- 头部展示 -->
      <div class="info-top-title">
        <div>
          <span  class="myInfo">我的信息</span><span class="english"> My Profile</span>
          <span class="asd"></span>
        </div>
      </div>
      <!-- 我的信息展示 -->
      <div class="show-user-info">
        <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft animate__animated animate__fadeInLeft">登录账号</div>
          <div class="group-input animate__animated animate__fadeInRight">
            <el-input
              style="width: 500px"
              placeholder="请输入内容"
              v-model="userName"
              clearable
            >
            </el-input>
          </div>
        </div>

        <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">昵称</div>
          <div class="group-input animate__animated animate__fadeInRight">
            <el-input
              style="width: 500px"
              placeholder="请输入内容"
              v-model="userNickname"
              clearable
            >
            </el-input>
          </div>
        </div>

         <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">身份</div>
          <div class="group-input animate__animated animate__fadeInRight">
            <el-input
              style="width: 500px"
              placeholder="请输入内容"
              v-model="userIdentity"
              clearable
            >
            </el-input>
          </div>
        </div>

        <div class="signal-communication">
          <div >
            <span class="myInfo">通信信息</span
            ><span class="english" style="font-size:14px"> Signal Communication</span
            ><span class="asd"></span>
          </div>
        </div>
          <div class="form-group">
            <div class="group-name animate__animated animate__fadeInLeft">邮箱</div>
            <div class="group-input animate__animated animate__fadeInRight">
              <el-input
                style="width: 500px"
                placeholder="请输入内容"
                v-model="userEmail"
                clearable
              >
              </el-input>
            </div>
        </div>

         <div class="form-group">
            <div class="group-name animate__animated animate__fadeInLeft">电话号码</div>
            <div class="group-input animate__animated animate__fadeInRight">
              <el-input
                style="width: 500px"
                placeholder="请输入内容"
                v-model="userPhoneNumber"
                clearable
              >
              </el-input>
            </div>
        </div>

         <div class="form-group">
            <div class="group-name animate__animated animate__fadeInLeft">地址</div>
            <div class="group-input animate__animated animate__fadeInRight">
            <el-cascader
                :options="options"
                v-model="userAddress"
        
                :show-all-levels="false"
              ></el-cascader>
            </div>
        </div>

         <div class="form-group">
            <div class="group-name animate__animated animate__fadeInLeft">邮编</div>
            <div class="group-input animate__animated animate__fadeInRight">
              <el-input
                style="width: 500px"
                placeholder="..."
                v-model="userZipcode"
                clearable
              >
              </el-input>
            </div>
        </div>

          <div class="form-group">
            <div class="group-name animate__animated animate__fadeInLeft">个人网址</div>
            <div class="group-input animate__animated animate__fadeInRight">
              <el-input
                style="width: 500px"
                placeholder="..."
                v-model="userWebsite"
                clearable
              >
              </el-input>
            </div>
        </div>

        <div class="signal-communication">
          <div >
            <span class="myInfo">其它信息</span
            ><span class="english"  style="font-size:14px"> Other</span
            ><span class="asd"></span>
          </div>
        </div>
          <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">用户名</div>
          <div class="group-input animate__animated animate__fadeInRight">
            <el-input
              style="width: 500px"
              placeholder="请输入内容"
              v-model="userName"
              clearable
            >
            </el-input>
          </div>
        </div>
      <!-- userBirthday -->
         <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">生日</div>
          <div class="group-input animate__animated animate__fadeInRight">
              <input type="date" class="dateInput" v-model="userBirthday">
          </div>
        </div>

            <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">性别</div>
          <div class="group-input animate__animated animate__fadeInRight">
              <el-radio v-model="userSex" label="0">男</el-radio>
              <el-radio v-model="userSex" label=1>女</el-radio>
          </div>
        </div>

            <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">年龄</div>
          <div class="group-input animate__animated animate__fadeInRight">
             <el-input
              placeholder="..."
              v-model="userAge"
              clearable>
            </el-input>
          </div>
        </div>

         <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">公司</div>
          <div class="group-input animate__animated animate__fadeInRight">
            <el-input
              style="width: 500px"
              placeholder="..."
              v-model="userCompany"
              clearable
            >
            </el-input>
          </div>
        </div>

         <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">职位</div>
          <div class="group-input animate__animated animate__fadeInRight">
            <el-input
              style="width: 500px"
              placeholder="..."
              v-model="userPosition"
              clearable
            >
            </el-input>
          </div>
        </div>

         <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">学校</div>
          <div class="group-input animate__animated animate__fadeInRight">
            <el-input
              style="width: 500px"
              placeholder="..."
              v-model="userSchool"
              clearable
            >
            </el-input>
          </div>
        </div>

         <div class="form-group">
          <div class="group-name animate__animated animate__fadeInLeft">学历</div>
          <div class="group-input animate__animated animate__fadeInRight">
            <el-input
              style="width: 500px"
              placeholder="..."
              v-model="userEducation"
              clearable
            >
            </el-input>
          </div>
        </div>
      </div>
      <div class="submit-info">
           <el-button @click="submitUserCompletion" type="primary">提交</el-button>
      </div>
    </div>
    
  </div>
</template>

<script>
import axios from "axios"
import pubsub from "pubsub-js"
export default {
  name: "InfoComplation",
  data() {
    return {
       options: [], //地区级联信息
      userName: "",//账号/用户名
      userNickname:"",//昵称
      userIdentity:"",//身份
      userEmail:"",//邮箱
      userPhoneNumber:"",//电话号码
      userAddress:"",//地址
      userZipcode:"",//邮编
      userWebsite:"",//个人网址
      userBirthday:"",//生日
      userSex:'0',
      userAge:"",
      userCompany:"",//公司
      userPosition:"",//职位
      userSchool:"",//学校
      userEducation:"",//学历
      userId:"",

    };
  },
  mounted(){

    this.getStoreUserInfo(this.$store.state.userInfo)
    //获取地区级联信息
    this.getAddressOptions()
  },
  methods:{
      //获取登录用户的数据
      getStoreUserInfo(item){
          const userInfo = item;
          if(userInfo!=null){
               this.userId = userInfo.userId
            this.userName = userInfo.userName;
            this.userNickname =  userInfo.userNickname
            this.userIdentity =  userInfo.userIdentity
            this.userEmail =  userInfo.userEmail
            this.userPhoneNumber =  userInfo.userPhoneNumber
            this.userAddress = userInfo.userAddress
            this.userSex = userInfo.userSex+""
            this.userAge = userInfo.userAge
            this.userZipcode =  userInfo.userZipcode  
            this.userWebsite =  userInfo.serWebsite
            this.userCompany =  userInfo.userCompany
            this.userPosition =  userInfo.userPosition
            this.userSchool =  userInfo.userSchool
            this.userEducation =  userInfo.userEducation
          }else{
            
          }
       
      },
      //提交信息
      submitUserCompletion(){
          if(this.userName == null || this.userName == "" || typeof this.userName=="undefined"){
              this.open4("用户账号不能为空")
          }else if(this.userId == 0 || this.userId == "" || this.userId == null){
              this.open4("用户未登录")
          }else {
            //密码强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)
            var pass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,10}$/
            // //Email地址
            var emai =/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
            //电话号码
            var ph =/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/
            //中国邮政编码为6位数字
            var zip = /[1-9]\d{5}(?!\d)/

            // if(ph.test(this.userName)){
            //     alert(4444444)
            // }else{alert(5555555555)}
              const that = this;
              axios({
                method:"post",
                url:"/aabbcc/user/userAllInfoUpdate",
                data:{
                   userId:that.userId,
                   userName: that.userName,//账号/用户名
                    userNickname:that.userNickname,//昵称
                    userIdentity:that.userIdentity,//身份
                    userEmail:that.userEmail,//邮箱
                    userPhoneNumber:that.userPhoneNumber,//电话号码
                    userAddress:that.userAddress,//地址
                    userZipcode:that.userZipcode,//邮编
                    userWebsite:that.userWebsite,//个人网址
                    userBirthday:that.userBirthday,//生日
                    userSex: that.userSex,
                   userAge : that.userAge,
                    userCompany:that.userCompany,//公司
                    userPosition:that.userPosition,//职位
                    userSchool:that.userSchool,//学校
                    userEducation:that.userEducation,//学历
                   
                }
              }).then(function(res){
                if(res.data.code == 200){
                    that.open2(res.data.massage)
                    //通知vuex数据修改
                      that.$store.commit("handlerUser", {
                        userInfo: res.data.obj,
                      });
                      //判断是否修改地址 true则通知天气系统查询信息
                      if(res.data.obj.userAddress=="" || res.data.obj.userAddress==null||typeof res.data.obj.userAddress=="undefined"){
                            //通知天气查询信息
                            pubsub.publish("selectWeachers","北京")
                      }else{
                           //通知天气查询信息
                         const addres =  res.data.obj.userAddress;
                         //按照，拆分
                         var caiadd = addres.split(",");
                         //获取最终地区名
                         var endAddress = caiadd[2].substring(0,caiadd[2].length-1)
                            pubsub.publish("selectWeachers",endAddress)
                      }

                      setTimeout(() => {
                          location.reload()
                      }, 4000);

                }else{
                  that.open4(res.data.massage)
                }
              })
          }
      },
      // 获取地区级联信息
      getAddressOptions(){
            // 为给定 ID 的 user 创建请求
        const that = this;
        axios.get("/aabbcc/test/address").then(function (response) {
          that.options = response.data;
          
        });
      },
       open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
  }
};
</script>

<style scoped>
.group-input label{
  margin-top: 13px;
}
.dateInput{
      -webkit-appearance: none;
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
.dateInput:hover{
 
    border-color: #C0C4CC;

}
.english{
    color: #777;
}
.info-completion {
  width: 96%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
/*头部 */
.info-top-title {
  width: 100%;
  height: 30px;
}
.info-top-title .myInfo {
    color: #333;
  font-size: 25px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.info-top-title > div {
  cursor: pointer;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
}
.info-top-title > div:hover .asd {
  opacity: 1;
  transform: scaleX(1);
  transition: all 0.5s linear;
}
.info-top-title .asd {
  width: 100%;
  border: 1px solid #2882c5;
  /* height: 1px; */
  /* background: red; */
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.5s linear;
}
/* 我的信息展示 */
.show-user-info {
  width: 100%;
  margin-top: 30px;
}
.form-group {
  display: flex;
  margin-bottom: 20px;
}
.form-group .group-name{
  width: 8%;
  margin-left: 70px;
  color: #2882c5;
  font-weight: 600;
  font-size: 16px;
  text-align: right;
  line-height: 39px;
}
.form-group .group-input {
  margin-left: 20px;
}
.input-login {
  width: 100%;
}
/* 下面title */
.signal-communication{
    margin-top: 35px;
    margin-bottom: 20px;
}
.signal-communication .myInfo{
    color: #333;
    font-size: 20px;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.signal-communication > div {
  cursor: pointer;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
}
.signal-communication > div:hover .asd {
  opacity: 1;
  transform: scaleX(1);
  transition: all 0.5s linear;
}
.signal-communication .asd {
  width: 100%;
  border: 1px solid #2882c5;
  /* height: 1px; */
  /* background: red; */
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.5s linear;
}
.submit-info{
       width: 100%;
    height: 71px;
    position: relative;
    /* display: block; */
    top: 20px;

}
.submit-info button{
    position: absolute;
    right: 0;
}
</style>